<#import "/spring.ftl" as spring />
<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <base href="<@spring.url basePath/>">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Eureka</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <link rel="stylesheet" href="eureka/css/wro.css">

  </head>

  <body id="one">
    <#include "header.ftl">
    <div class="container-fluid xd-container">
      <#include "navbar.ftl">
      <h1>Instances currently registered with Eureka</h1>
      <table id='instances' class="table table-striped table-hover">
        <thead>
          <tr><th>Application</th><th>AMIs</th><th>Availability Zones</th><th>Status</th></tr>
        </thead>
        <tbody>
          <#if apps?has_content>
            <#list apps as app>
              <tr>
                <td><b>${app.name}</b></td>
                <td>
                  <#list app.amiCounts as amiCount>
                    <b>${amiCount.key}</b> (${amiCount.value})<#if amiCount_has_next>,</#if>
                  </#list>
                </td>
                <td>
                  <#list app.zoneCounts as zoneCount>
                    <b>${zoneCount.key}</b> (${zoneCount.value})<#if zoneCount_has_next>,</#if>
                  </#list>
                </td>
                <td>
                  <#list app.instanceInfos as instanceInfo>
                    <#if instanceInfo.isNotUp>
                      <font color=red size=+1><b>
                    </#if>
                    <b>status: ${instanceInfo.status} counts: (${instanceInfo.instances?size})</b>
                    <#if instanceInfo.isNotUp>
                      </b></font>
                    </#if>
                    <#list instanceInfo.instances as instance>
                      <div>
                          <#if instance.isHref>
                            <a class="forswagger" href="${instance.url}" target="_blank">${instance.id}</a>
                          <#else>
                            ${instance.id}
                          </#if>
                          | operate:
                          <span>
                              <#if instanceInfo.isNotUp>
                              <#else>
                                <a href="javascript:void(0);" onclick="doDown('${app.name}', '${instance.id}', this.parentNode.previousElementSibling);">下线</a>
                              </#if>
                          </span>
                          <span><a href="javascript:void(0);" onclick="doDelete('${app.name}', '${instance.id}', this.parentNode.parentNode);">删除</a></span>
                      </div>
                    </#list>
                  </#list>
                </td>
              </tr>
            </#list>
          <#else>
            <tr><td colspan="4">No instances available</td></tr>
          </#if>

        </tbody>
      </table>

      <h1>General Info</h1>

      <table id='generalInfo' class="table table-striped table-hover">
        <thead>
          <tr><th>Name</th><th>Value</th></tr>
        </thead>
        <tbody>
          <#list statusInfo.generalStats?keys as stat>
            <tr>
              <td>${stat}</td><td>${statusInfo.generalStats[stat]!""}</td>
            </tr>
          </#list>
          <#list statusInfo.applicationStats?keys as stat>
            <tr>
              <td>${stat}</td><td>${statusInfo.applicationStats[stat]!""}</td>
            </tr>
          </#list>
        </tbody>
      </table>

      <h1>Instance Info</h1>

      <table id='instanceInfo' class="table table-striped table-hover">
        <thead>
          <tr><th>Name</th><th>Value</th></tr>
        <thead>
        <tbody>
          <#list instanceInfo?keys as key>
            <tr>
              <td>${key}</td><td>${instanceInfo[key]!""}</td>
            </tr>
          </#list>
        </tbody>
      </table>
    </div>
    <script type="text/javascript" src="eureka/js/wro.js" ></script>
    <script type="text/javascript">
       $(document).ready(function() {
         $('table.stripeable tr:odd').addClass('odd');
         $('table.stripeable tr:even').addClass('even');
       });
       
       function doDown(appName, instanceId, aimObjToChangeStyle, callback) {
         var url = "/eureka/apps/" + appName + "/" + instanceId + "/status?value=OUT_OF_SERVICE";
         if(!callback) {
             callback = function() {
                 window.location.reload();
                 //aimObjToChangeStyle.style.borderBottom = "red 2px solid";
             }
         }
         
         ajaxMethod(url, "PUT", callback);
       }
       
       function doDelete(appName, instanceId, aimObjToRemove) {
         doDown(appName, instanceId, aimObjToRemove, function() {
             var url = "/eureka/apps/" + appName + "/" +  instanceId;
             ajaxMethod(url, "DELETE", function() {
                //aimObjToRemove.remove();
                window.location.reload();
             });
         });
         
       }
       
       function ajaxMethod(url, method, callback) {
           var httpRequest = new XMLHttpRequest();//第一步：建立所需的对象
           httpRequest.open(method, url, true);//第二步：打开连接
           httpRequest.send();//第三步：发送请求  将请求参数写在URL中
           /**
            * 获取数据后的处理程序
            */
           httpRequest.onreadystatechange = function () {
               if (httpRequest.readyState == 4 && httpRequest.status == 200) {
                   var json = httpRequest.responseText;//获取到json字符串，还需解析
                   console.log(json);
                   if(callback) {
                       callback();
                   }
               }
           };
       }
       
       function replaceOutIp() {
           var ipTmp = '${ipTransfer}';
           console.log("ip config: " + ipTmp);
           var ipJson = eval("(" + ipTmp + ")");
           var divDoms = document.getElementsByClassName("forswagger");
           for (var i = 0; i < divDoms.length; i++) {
               var dDom = divDoms[i];
               parseDom(dDom, ipJson);
           }
       }
       
       function parseDom(dDom, ipJson) {
           for(var k in ipJson) {
               if(dDom.href.indexOf(k) != -1) {
                   dDom.href = dDom.href.replace(k, ipJson[k]);
                   dDom.innerHTML = dDom.innerText.replace(k, ipJson[k]);
                   console.log("ip 替换为外网ip: " + dDom.href);
                   return;
               }
           }
           console.error("status.ftl 未配置内网 ip 对应的外网ip， swagger可能无法访问 ,href: " + dDom.href);
       }
       
       
       replaceOutIp();
    </script>
    
  </body>
</html>
